一个拦截ajax请求并修改请求、响应信息的Chrome插件

2023-07-06 15:17| 来源: 网络整理| 查看: 265

写了一个 Chrome 插件Ajax Interceptor Tools，使用这个插件，你可以通过 JSON 或 JavaScript 代码片段来编辑并修改响应结果，还支持使用 Mock.js 语法生成随机数据。另外还可以修改请求地址、请求头等内容，并且插件支持分组、导入/导出规则配置等。

使用 QuicklyAddRequestsForModification.gif 一、修改Response响应结果

在Response编辑器中，您可以选择： 1、使用JSON/JavaScript格式编辑响应结果 2、转发原始响应结果（如果清空Response编辑器，将会把原始响应结果转发给应用程序）

1、使用JSON格式编辑响应结果

示例：

{ "status": 200, "response": "OK" } 2、使用JavaScript格式编辑响应结果

使用JS方式编辑响应结果时，通过new Function(responseText)生成函数并执行，响应结果即为函数的返回值。

2.1. 简单JavaScript片段

示例：

const data = []; for (let i = 0; i < 10; i++) { data.push({ id: i }); } return { "status": 200, "response": data } 2.2. 使用 mock.js 生成随机数据

示例：

const data = Mock.mock({ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数，起始值为 1，每次增 1 'id|+1': 1 }] }); return { "status": 200, "response": data }

将生成类似以下数据：

// ==> { "list": [ { "id": 1 }, { "id": 2 }, { "id": 3 } ] } 2.3. 从arguments获取原始数据，简单编程创建场景

示例：

let { method, payload, originalResponse } = arguments[0]; if (method === 'get') { // 请求方式 // do something } if (payload) { // 入参 { queryStringParameters，requestPayload } // do something } return { "status": 200, "response": originalResponse }; 二、修改Request请求信息

在Request面板中，您可以选择修改请求URL、method、headers和payload。

1. 修改请求URL和method

例下图中，将会把匹配到的/auth/login请求路径替换为/auth/login2，并把请求方法改为POST，您可以打开devtools在Network面板中看到替换后的请求。

2. 修改请求headers

例下图中，将会把请求headers中的Content-Type替换为application/json。

3. 修改请求payload

例下图中，将会在入参中新增test: test123，您可以打开devtools在Network面板中看到请求体的修改。

三、支持导入/导出 SupportImportExportOfRuleConfigurations.gif 下载

项目地址：https://github.com/PengChen96/ajax-tools 谷歌商店：https://chrome.google.com/webstore/detail/ajax-interceptor-tools/kphegobalneikdjnboeiheiklpbbhncm

【本文地址】

公司简介

联系我们